<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\models\User */

?>

<?php
    $hourList = [
        '0' => '00:00',
        '100' => '01:00',
        '200' => '02:00',
        '300' => '03:00',
        '400' => '04:00',
        '500' => '05:00',
        '600' => '06:00',
        '700' => '07:00',
        '800' => '08:00',
        '900' => '09:00',
        '1000' => '10:00',
        '1100' => '11:00',
        '1200' => '12:00',
        '1300' => '13:00',
        '1400' => '14:00',
        '1500' => '15:00',
        '1600' => '16:00',
        '1700' => '17:00',
        '1800' => '18:00',
        '1900' => '19:00',
        '2000' => '20:00',
        '2100' => '21:00',
        '2200' => '22:00',
        '2300' => '23:00',
    ];
?>

<style>
    .form-horizontal .form-group {
        margin-left: 0px;
        margin-right: 0px;
    }
</style>

<script>
    var msg_required = "<?= Yii::t('app', 'Please enter the required fields.') ?>";
    var msg_alphabet = "<?= Yii::t('app', 'Please enter alphanumeric characters.') ?>";

    // serialize form, render response and close modal
    function submitForm() {
        $form = $("#user-form");

        return validate();

        $.post(
                $form.attr("action"), // serialize Yii2 form
                $form.serialize()
            )
            .done(function(result) {
                //$form.parent().html(result.message);
                //$('#modal').modal('hide');

                console.log(result);
            })
            .fail(function() {
                //console.log("server error");
                //$form.replaceWith('<button class="newType">Fail</button>').fadeOut()
            });
        return false;
    }

    function validate(){
        $(".c-error").removeClass("c-error");

        var userID = $("#UserID").val();
        var userName = $("#UserName").val();
        var password = $("#Password").val();
        var mailAddress = $("#MailAddress").val();

        var result = true;

        if(userID == "")
        {
            $("#UserID").addClass("c-error");
            result = false;
        }

        if(userName == "")
        {
            $("#UserName").addClass("c-error");
            result = false;
        }

        if(password == "")
        {
            $("#Password").addClass("c-error");
            result = false;
        }

        if(mailAddress == "")
        {
            $("#MailAddress").addClass("c-error");
            result = false;
        }

        if(!result){
            $("#msg-error").html(msg_required);
            $("#msg-error").css('display', 'table-cell');
        }
        else{
            if(!app.validator.isValidUsername("UserID")){
                $("#UserID").addClass("c-error");
                result = false;
            }

            if(!app.validator.isValidUsername("UserName")){
                $("#UserName").addClass("c-error");
                result = false;
            }

            if(!app.validator.isValidPassword("Password"))
            {
                $("#Password").addClass("c-error");
                result = false;
            }
        }

        if(!result){
            $("#msg-error").html(msg_alphabet);
            $("#msg-error").css('display', 'table-cell');
        }

        return result;
    }

    $(function(){
        $(".modal-header").hide();
    });
</script>

<div class="user-create" style="padding:50px;">
    <div style="padding:0px; margin-bottom: 20px;" >
        <label style="height:30px; line-height: 30px; background-color: #0095d8; width:10px;">&nbsp;</label>&nbsp;
        <label style="font-size: 1.1em;"><?= Yii::t('app', 'Create user') ?></label>
    </div>

    <div style="height:60px;">
        <div id="msg-error" style="border:solid 3px red; text-align:left; vertical-align: middle; font-size:17px; color:red; height: 60px; width:400px; padding-left:10px; display:none;">

        </div>
    </div>
    <div style="padding:0px; margin-top: 20px;">
        <?php $form = ActiveForm::begin([
            'id'    => 'user-form',
            'options' => ['class' => 'form-horizontal'],
            'fieldConfig' => [
                'template' => "<div style='display:none;'>{input}</div>",
                'labelOptions' => ['class' => ''],
            ],
        ]);

        $form -> successCssClass = '';
        ?>

        <?= $form->field($model, 'UserName')->textInput(['maxlength' => 50]) ?>

        <div class="form-group" style="float:left;">
            <div class="input-group">
                <label for="UserName">UserName</label><label class="required">*</label><br/>
                <input type="input" style="height:50px; width:400px;" id="UserName" name="User[UserName]" class="form-control">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left; margin-left:80px;">
            <div class="input-group" >
                <label for="UserID">UserID</label><label class="required">*</label><br/>
                <input type="input" style="height:50px; width:180px;" id="UserID" name="User[UserID]" class="form-control">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left;  margin-left:40px;">
            <div class="input-group">
                <label for="Password">Password</label><label class="required">*</label><br/>
                <input type="password" style="height:50px; width:180px;" id="Password" name="User[Password]" class="form-control">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left;">
            <div class="input-group">
                <label for="TellNumber">TellNumber</label><br/>
                <input type="input" style="height:50px; width:400px;" id="TellNumber" name="User[TellNumber]" class="form-control">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left; margin-left:80px;">
            <div class="input-group">
                <label for="MailAddress">MailAddress</label><label class="required">*</label><br/>
                <input type="input" style="height:50px; width:400px;" id="MailAddress" name="User[MailAddress]" class="form-control">
            </div><!-- /input-group -->
        </div>
        <div style="clear:both;"></div>
        <div class="form-group">
            <div class="input-group">
                <label for="WorkingStartTime">WorkingStartTime</label><br/>

                <select style="height:50px; width:200px;" name="User[WorkingStartTime]" class="form-control" id="WorkingStartTime">
                    <?php foreach($hourList as $key => $value){  ?>
                        <option value="<?= $key ?>"><?= $value ?></option>
                    <?php } ?>
                </select>
                <label style="padding:0px 10px;">～</label>
                <select style="height:50px; width:200px; float:none;" name="User[WorkingEndTime]" class="form-control" id="WorkingEndTime">
                    <?php foreach($hourList as $key => $value){  ?>
                        <option value="<?= $key ?>"><?= $value ?></option>
                    <?php } ?>
                </select>
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left; width:435px;">
            <div class="input-group" style="width:100%;">
                <label for="ManagementFlag">ManagementFlag</label>
                <input type="checkbox" id="ManagementFlag" name="User[ManagementFlag]" class="" value="1" style="float:right;">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left; margin-left:45px; width:400px;">
            <div class="input-group" style="width:100%;">
                <label for="ReportFlag">ReportFlag</label>
                <input type="checkbox" id="ReportFlag" name="User[ReportFlag]" class="" value="1" style="float:right;">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left; width:435px;">
            <div class="input-group" style="width:100%;">
                <label for="ClientDeleteFlag">ClientDeleteFlag</label>
                <input type="checkbox" id="ClientDeleteFlag" name="User[ClientDeleteFlag]" class="" value="1" style="float:right;">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="float:left; margin-left:45px; width:400px;">
            <div class="input-group" style="width:100%;">
                <label for="ScheduleFlag">ScheduleFlag</label>
                <input type="checkbox" id="ScheduleFlag" name="User[ScheduleFlag]" class="" value="1" style="float:right;">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="width:435px;">
            <div class="input-group" style="width:100%;">
                <label for="DeleteFlag">DeleteFlag</label>
                <input type="checkbox" id="DeleteFlag" name="User[DeleteFlag]" class="" value="1" style="float:right;">
            </div><!-- /input-group -->
        </div>

        <div class="form-group" style="width:100%; text-align: center;">
            <button data-dismiss="modal" class="btn btn-default" type="button">戻る</button>
            <label style="width:40px;"></label>
            <button class="btn btn-primary" type="button" onclick="submitForm()">登録</button>
        </div>

        <?php ActiveForm::end(); ?>

    </div>
</div>
